<template>
  <div class="box">
    <!-- 概况start -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" style="height: 170px">
          <div class="box_text">
            人事概况
            <span class="box_text2">更新时间：2035年6月19日 12:35:59</span>
          </div>
          <el-row>
            <!-- 今日销售额 -->
            <div
              class="box_1"
              style="
                border: 1px solid rgb(234, 234, 234);
                border-top: 2px solid rgb(244, 191, 191);
                border-radius: 10px;
              "
            >
              <div class="text_1">
                <span class="text_1_color"
                  ><span class="text_1_span">76.54</span><span>万</span></span
                ><br />
                <span class="text_2_span">今日销售额</span>
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-jinbi"
                  style="font-size: 35px; color: rgb(255, 185, 185)"
                ></i>
              </div>
            </div>
            <!-- 今日订单数 -->
            <div
              class="box_1"
              style="
                border: 1px solid rgb(234, 234, 234);
                border-top: 2px solid #f2d896;
                border-radius: 10px;
              "
            >
              <div class="text_1">
                <span class="text_1_color" style="color: #f2d896"
                  ><span class="text_1_span" style="color: #ffb700"
                    >76.54</span
                  ></span
                ><br />
                <span class="text_2_span">今日订单数</span>
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-dingdan"
                  style="font-size: 35px; color: #f2d896"
                ></i>
              </div>
            </div>
            <!-- 今日销售利润 -->
            <div
              class="box_1"
              style="
                border: 1px solid rgb(234, 234, 234);
                border-top: 2px solid #abd7ff;
                border-radius: 10px;
              "
            >
              <div class="text_1">
                <span class="text_1_color" style="color: #abd7ff"
                  ><span class="text_1_span" style="color: #1890ff">76.54</span
                  ><span>万</span></span
                ><br />
                <span class="text_2_span">今日销售利润</span>
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-lirun2"
                  style="font-size: 35px; color: #abd7ff"
                ></i>
              </div>
            </div>
            <!-- 今日销售产品数 -->
            <div
              class="box_1"
              style="
                border: 1px solid rgb(234, 234, 234);
                border-top: 2px solid #b0dae3;
                border-radius: 10px;
              "
            >
              <div class="text_1">
                <span class="text_1_color"
                  ><span class="text_1_span" style="color: #47bcd6"
                    >76.54</span
                  ></span
                ><br />
                <span class="text_2_span">今日销售产品数</span>
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-chezaikucun"
                  style="font-size: 35px; color: #b0dae3"
                ></i>
              </div>
            </div>
            <!-- 今日新增用户 -->
            <div
              class="box_1"
              style="
                border: 1px solid rgb(234, 234, 234);
                border-top: 2px solid #b7e9b3;
                border-radius: 10px;
              "
            >
              <div class="text_1">
                <span class="text_1_color"
                  ><span class="text_1_span" style="color: #92dd8b"
                    >76.54</span
                  ></span
                ><br />
                <span class="text_2_span">今日新增用户</span>
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-userplus-fill"
                  style="font-size: 35px; color: #b7e9b3"
                ></i>
              </div>
            </div>
            <!-- 新增购买人数 -->
            <div
              class="box_1"
              style="
                border: 1px solid rgb(234, 234, 234);
                border-top: 2px solid #dfd5ff;
                border-radius: 10px;
              "
            >
              <div class="text_1">
                <span class="text_1_color"
                  ><span class="text_1_span" style="color: #9e79ff"
                    >76.54</span
                  ></span
                ><br />
                <span class="text_2_span">新增购买人数</span>
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-userplus-fill"
                  style="font-size: 35px; color: #dfd5ff"
                ></i>
              </div>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 概况end -->
    <el-row :gutter="20">
      <!-- 常用功能start -->
      <el-col :span="18">
        <div class="grid-content bg-purple-dark" style="height: 150px">
          <div class="box_text">常用功能</div>
          <el-row>
            <!-- 添加员工 -->
            <div class="box_2">
              <div class="box_2_img">
                <i
                  class="iconfont icon-tianjiayuangong"
                  style="font-size: 40px; color: #1890ff"
                ></i>
              </div>
              <div class="box_2_text">添加用户</div>
            </div>
            <!-- 办理入职 -->
            <div class="box_2">
              <div class="box_2_img">
                <i
                  class="iconfont icon-banliruzhi"
                  style="font-size: 40px; color: #9b79ff"
                ></i>
              </div>
              <div class="box_2_text">办理入职</div>
            </div>
            <!-- 办理转正 -->
            <div class="box_2">
              <div class="box_2_img">
                <i
                  class="iconfont icon-banlizhuanzheng"
                  style="font-size: 40px; color: #2ac857"
                ></i>
              </div>
              <div class="box_2_text">办理转正</div>
            </div>
            <!-- 人才库 -->
            <div class="box_2">
              <div class="box_2_img">
                <i
                  class="iconfont icon-rencaiku"
                  style="font-size: 40px; color: #ff5d5d"
                ></i>
              </div>
              <div class="box_2_text">人才库</div>
            </div>
            <!-- 安排面试 -->
            <div class="box_2">
              <div class="box_2_img">
                <i
                  class="iconfont icon-anpai"
                  style="font-size: 40px; color: #47bcd6"
                ></i>
              </div>
              <div class="box_2_text">安排面试</div>
            </div>
            <!-- 职位管理 -->
            <div class="box_2">
              <div class="box_2_img">
                <i
                  class="iconfont icon-huo"
                  style="font-size: 40px; color: #fb7b13"
                ></i>
              </div>
              <div class="box_2_text">职位管理</div>
            </div>
            <!-- 候选人管理 -->
            <div class="box_2">
              <div class="box_2_img">
                <i
                  class="iconfont icon-houxuanrenguanli"
                  style="font-size: 35px; color: #ff5d5d"
                ></i>
              </div>
              <div class="box_2_text">候选人管理</div>
            </div>
            <!-- 招聘数据 -->
            <div class="box_2">
              <div class="box_2_img">
                <i
                  class="iconfont icon-zhaopinshuju"
                  style="font-size: 40px; color: #9b79ff"
                ></i>
              </div>
              <div class="box_2_text">招聘数据</div>
            </div>
          </el-row>
        </div>
      </el-col>
      <!-- 常用功能end -->
    </el-row>
    <el-row :gutter="10">
      <!-- 今日招聘start -->
      <el-col :span="9">
        <div class="grid-content bg-purple-dark" style="height: 380px">
          <div class="box_text">今日招聘</div>
          <div class="box_3">
            <!-- 招聘职位 -->
            <div class="box_3_min">
              <span class="min_text">37</span
              ><span class="min_text2" style="color: #b39daa">个</span><br />
              <span class="text_2_span">招聘职位</span>
            </div>
            <!-- 今日面试 -->
            <div class="box_3_min">
              <span class="min_text">9</span
              ><span class="min_text2" style="color: #b39daa">人</span><br />
              <span class="text_2_span">今日面试</span>
            </div>
            <!-- 剩余招聘 -->
            <div class="box_3_min">
              <span class="min_text">18</span
              ><span class="min_text2" style="color: #b39daa">人</span><br />
              <span class="text_2_span">剩余招聘人数</span>
            </div>
          </div>
          <!-- 应聘人员 -->
          <div class="box_3_c">
            <div class="box_3_content">
              <div class="box_3_content_name">周杰伦</div>
              <div class="box_3_content_post">
                <span class="box_3_content_post_1">应聘职位 : </span>前端工程师
                <span class="box_3_content_post_1">面试官 :</span> 乔布斯
              </div>
              <div class="box_3_content_time">
                <i class="iconfont icon-shijian"></i>13:00
              </div>
            </div>
            <!-- 应聘人员 -->
            <div class="box_3_content">
              <div class="box_3_content_name">周杰伦</div>
              <div class="box_3_content_post">
                <span class="box_3_content_post_1">应聘职位 : </span>前端工程师
                <span class="box_3_content_post_1">面试官 :</span> 乔布斯
              </div>
              <div class="box_3_content_time">
                <i class="iconfont icon-shijian"></i>13:00
              </div>
            </div>
            <!-- 应聘人员 -->
            <div class="box_3_content">
              <div class="box_3_content_name">周杰伦</div>
              <div class="box_3_content_post">
                <span class="box_3_content_post_1">应聘职位 : </span>前端工程师
                <span class="box_3_content_post_1">面试官 :</span> 乔布斯
              </div>
              <div class="box_3_content_time">
                <i class="iconfont icon-shijian"></i>13:00
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 今日招聘end -->
      <!-- 今日考勤start -->
      <el-col :span="9">
        <div class="grid-content bg-purple-dark" style="height: 380px">
          <div class="box_text">今日考勤</div>
          <div class="box_3" style="width: 250px">
            <!-- 招聘职位 -->
            <div class="box_3_min">
              <span class="min_text">139</span
              ><span class="min_text2" style="color: #b39daa">个</span><br />
              <span class="text_2_span">打卡人数</span>
            </div>
            <!-- 今日面试 -->
            <div class="box_3_min">
              <span class="min_text">16</span
              ><span class="min_text2" style="color: #b39daa">人</span><br />
              <span class="text_2_span">打卡异常</span>
            </div>
          </div>
          <!-- 迟到 -->
          <div class="box_3_c">
            <div class="box_3_content">
              <div class="box_3_content_name">迟到</div>
              <div class="box_3_content_post">
                <span class="box_3_content_post_1">迟到30分钟内的人数</span>
              </div>
              <div class="box_3_content_time">3人</div>
            </div>
            <!-- 早退 -->
            <div class="box_3_content">
              <div class="box_3_content_name">早退</div>
              <div class="box_3_content_post">
                <span class="box_3_content_post_1">早退超过30分钟的人数</span>
              </div>
              <div class="box_3_content_time">1人</div>
            </div>
            <!-- 缺卡 -->
            <div class="box_3_content">
              <div class="box_3_content_name">缺卡</div>
              <div class="box_3_content_post">
                <span class="box_3_content_post_1">今日缺卡员工</span>
              </div>
              <div class="box_3_content_time">0人</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 今日考勤end -->
    </el-row>
    <el-row :gutter="10">
      <!-- 即将入职start -->
      <el-col :span="9">
        <div class="grid-content bg-purple-dark" style="height: 380px">
          <div class="box_text">即将入职</div>
          <div class="box_3" style="width: 120px">
            <!-- 即将入职 -->
            <div class="box_3_min">
              <span class="min_text">2</span
              ><span class="min_text2" style="color: #b39daa">个</span><br />
              <span class="text_2_span">招聘职位</span>
            </div>
          </div>
          <!-- 入职人员 -->
          <div class="box_3_c">
            <div class="box_3_content">
              <div class="box_3_content_name">小李子</div>
              <div class="box_3_content_post">
                <span class="box_3_content_post_2">技术部 | 前端工程师</span>
              </div>
              <div class="box_3_content_time">2035-09-19入职</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 即将入职end -->
      <!-- 即将转正start -->
      <el-col :span="9">
        <div class="grid-content bg-purple-dark" style="height: 380px">
          <div class="box_text">即将转正</div>
          <div class="box_3" style="width: 120px">
            <!-- 即将转正 -->
            <div class="box_3_min">
              <span class="min_text">2</span
              ><span class="min_text2" style="color: #b39daa">个</span><br />
              <span class="text_2_span">即将转正</span>
            </div>
          </div>
          <!-- 即将转正人员 -->
          <div class="box_3_c">
            <div class="box_3_content">
              <div class="box_3_content_name">姆巴佩</div>
              <div class="box_3_content_post">
                <span class="box_3_content_post_2">技术部 | 前端工程师</span>
              </div>
              <div class="box_3_content_time">2035-09-19转正</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 今日考勤end -->
    </el-row>
    <!-- 待办事项start -->
    <div class="backlog">
      <div class="box_text">代办事项</div>
      <!-- 入职提醒 -->
      <div class="backlog_class">
        <div class="backlog_img">
          <i class="iconfont icon-ruzhitixing" style="font-size: 40px"></i>
        </div>
        <div class="backlog_text">
          <span class="backlog_text1">7165</span><br />
          <span class="backlog_text2">入职提醒</span>
        </div>
      </div>
      <!-- 转账提醒 -->
      <div class="backlog_class">
        <div class="backlog_img">
          <i class="iconfont icon-jiaoyitongzhi" style="font-size: 40px"></i>
        </div>
        <div class="backlog_text">
          <span class="backlog_text1">6713</span><br />
          <span class="backlog_text2">转账提醒</span>
        </div>
      </div>
      <!-- 生日提醒 -->
      <div class="backlog_class">
        <div class="backlog_img">
          <i class="iconfont icon-shengriliwu" style="font-size: 40px"></i>
        </div>
        <div class="backlog_text">
          <span class="backlog_text1">37</span><br />
          <span class="backlog_text2">生日提醒</span>
        </div>
      </div>
      <!-- 合同到期 -->
      <div class="backlog_class">
        <div class="backlog_img">
          <i class="iconfont icon-hetong" style="font-size: 40px"></i>
        </div>
        <div class="backlog_text">
          <span class="backlog_text1">645</span><br />
          <span class="backlog_text2">合同即将到期</span>
        </div>
      </div>
      <!-- 合同未签订 -->
      <div class="backlog_class">
        <div class="backlog_img">
          <i class="iconfont icon-weiqianding" style="font-size: 35px"></i>
        </div>
        <div class="backlog_text">
          <span class="backlog_text1">45</span><br />
          <span class="backlog_text2">合同未签订</span>
        </div>
      </div>
    </div>
    <!-- 代办事项end -->
    <!-- 公告start -->
    <div class="notice">
      <div class="box_text">
        公告<span style="float: right; font-size: 12px; margin-right: 20px"
          >查看更多 ></span
        >
      </div>
      <!-- 公告信息 绿标 -->
      <div class="notice_message">
        <div class="tag">
          <el-tag type="success"  size="mini">信息</el-tag>
        </div>
        <div class="message">
          <span>系统新版本升级通知，新功能介绍</span>
        </div>
      </div>
      <!-- 公告信息 红标 -->
      <div class="notice_message">
        <div class="tag">
          <el-tag type="danger" size="mini">信息</el-tag>
        </div>
        <div class="message">
          <span>系统新版本升级通知，新功能介绍</span>
        </div>
      </div>
    </div>
    <!-- 公告end -->
    <!-- 离职申请start -->
    <div class="dimission">
      <div class="box_text">离职申请</div>
      <div class="box_3" style="width: 120px">
        <!-- 离职申请 -->
        <div class="box_3_min">
          <span class="min_text">2</span
          ><span class="min_text2" style="color: #b39daa">个</span><br />
          <span class="text_2_span">提交离职申请</span>
        </div>
      </div>
      <div class="box_4_c">
        <div class="box_4_content">
          <div class="box_4_content_name">姆巴佩</div>
          <div class="box_4_content_post">
            <span class="box_4_content_post_2">技术部 | 前端工程师</span>
          </div>
          <div class="box_4_content_time">2035-09-19转正</div>
        </div>
      </div>
    </div>
    <!-- 离职申请end -->
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* element-ui样式 */
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
  border-radius: 10px;
}
/* 自定义样式 */
* {
  margin: 0px;
  padding: 0px;
}
.box {
  width: 98%;
  height: 100%;
  margin: auto;
  /* background-color: red; */
}
.box_text {
  padding-top: 20px;
  padding-left: 40px;
  font-size: 14px;
}
.box_text2 {
  padding-left: 20px;
  font-size: 14px;
  color: #989daa;
}
.box_1 {
  width: 185px;
  height: 78px;
  margin-left: 18px;
  margin-top: 20px;
  float: left;
  /* padding-left: 40px; */
}
.text_1 {
  margin-top: 20px;
  margin-left: 20px;
  width: 85px;
  float: left;
}
.text_1_span {
  margin-top: 20px;
  font-size: 23px;
}
.text_1_color {
  color: rgb(255, 93, 93);
}
.text_2_span {
  font-size: 12px;
}
.box_1_img {
  float: right;
  margin-top: 20px;
  margin-right: 10px;
}
/* 常用功能 */
.box_2 {
  margin-left: 40px;
  margin-top: 18px;
  width: 70px;
  height: 0px;
  float: left;
}
.box_2_img {
  width: 40px;
  height: 40px;
  margin: auto;
}
.box_2_text {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}
/* 今日招聘 and 今日考勤 */
.box_3 {
  width: 350px;
  margin: auto;
  margin-top: 30px;
}
.box_3_min {
  float: left;
  width: 90px;
  text-align: center;
  margin-left: 20px;
}
.min_text {
  font-size: 20px;
}
.min_text2 {
  font-size: 14px;
}
/* 应聘人员 */
.box_3_c {
  border-top: 1px solid #9e9d9d;
  float: left;
  width: 90%;
  margin-top: 30px;
  margin-left: 24px;
}
.box_3_content {
  width: 80%;
  /* border: 1px solid red; */
  float: left;
  margin-left: 50px;
  margin-top: 20px;
}
.box_3_content_name {
  font-size: 14px;
}
.box_3_content_post {
  margin-top: 10px;
  font-size: 12px;
}
.box_3_content_post_1 {
  color: #c6c9d0;
}
.box_3_content_time {
  float: right;
  font-size: 14px;
  margin-right: 20px;
  margin-top: -30px;
}
/* 待办事项 */
.backlog {
  width: 300px;
  height: 338px;
  position: relative;
  left: 960px;
  top: -940px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.backlog_class {
  width: 120px;
  height: 80px;
  float: left;
  margin-left: 20px;
  margin-top: 15px;
}
.backlog_img {
  width: 40px;
  height: 40px;
  float: left;
  margin-top: 20px;
}
.backlog_text {
  width: 73px;
  height: 50px;
  float: left;
  margin-top: 20px;
  text-align: center;
}
.backlog_text1 {
  color: #5b5e68;
  font-size: 20px;
}
.backlog_text2 {
  color: #989daa;
  font-size: 12px;
}
/* 公告 */
.notice {
  width: 300px;
  height: 268px;
  position: relative;
  left: 960px;
  top: -940px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.notice_message {
  float: left;
  width: 250px;
  height: 20px;
  margin-left: 30px;
  margin-top: 12px;
  border-radius: 5px;
  /* border: 1px solid red; */
}
.notice_message:hover {
  background-color: #b7b6b6;
}
.tag {
  float: left;
}
.message {
  float: left;
  margin-left: 20px;
  line-height: 22px;
  font-size: 12px;
}
/* 离职申请 */
.dimission {
  width: 300px;
  height: 298px;
  position: relative;
  left: 960px;
  top: -940px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.box_4_c {
  border-top: 1px solid #9e9d9d;
  float: left;
  width: 90%;
  margin-top: 30px;
  margin-left: 24px;
}
.box_4_content {
  width: 80%;
  /* border: 1px solid red; */
  float: left;
  /* margin-left: 50px; */
  margin-top: 20px;
}
.box_4_content_name {
  font-size: 14px;
}
.box_4_content_post {
  margin-top: 10px;
  font-size: 12px;
}
.box_4_content_post_1 {
  color: #c6c9d0;
}
.box_4_content_time {
  float: right;
  font-size: 14px;
  margin-right: -30px;
  margin-top: -30px;
}
</style>